<!-- 运动记录 -->
<template>
<div class="container_food_recoreded">
    <div class="circle_box">
        <div style="padding-bottom: 0.625rem;">今日还要运动消耗(千卡)</div>
        <van-circle :clockwise="false" size="120" stroke-width="100" layer-color="#e5f0db" color="#639339" stroke-linecap="square" v-model="rate.number" :rate="rate.number" :text="rate.text" />
    </div>
    <!-- 列表 -->
    <div class="list">
        <!-- 早餐 -->
        <div class="title">
            <span>今日运动</span>
            <span>
                <van-icon name="fire" color="#e88e61" />已消耗{{ calTotal }}千卡</span>
        </div>

        <van-swipe-cell :before-close="beforeClose" v-for="(item,index) in dataList" :name="item.id" :key="item.id">
            <div class="food_item">
                <img :src="item.imgUrl" alt="">
                <div class="food_des">
                    <div>{{ item.name }}</div>
                    <div>{{ item.cal }}千卡 / {{ item.unit }}分钟</div>
                </div>
                <van-icon name="arrow-left" color="#ddd" size="16" />
            </div>
            <template #right>
                <van-button square type="danger" text="删除" /></template>
        </van-swipe-cell>

    </div>

    <!-- 按钮 -->
    <div class="btn">
        <van-button plain type="default" color="#fcb18c" @click="goRecord()">记运动</van-button>
    </div>

</div>
</template>

<script>
import {
    apiRequest
} from '../../assets/js/axios_api'
export default {
    metaInfo() {
        return {
            title: '运动记录'
        }
    },
    name: 'SportRecoreded',
    data() {
        return {
            userInfo: {},
            rate: {
                number: 0,
                text: ''
            },
            calTotal: 0,
            calSportCommand: sessionStorage.getItem('calSportCommand'),
            dataList: []
        }
    },
    components: {},
    mounted() {
        this.userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
        this.getSportData()
    },
    methods: {
        // 滑动删除，点击删除
        beforeClose({
            name,
            position,
            instance
        }) {
            // position 为关闭时点击的位置，instance 为对应的 SwipeCell 实例
            switch (position) {
                case 'left':
                case 'cell':
                case 'outside':
                    instance.close();
                    break;
                case 'right':
                    this.$dialog.confirm({
                        message: '确定删除吗？',
                    }).then(() => {
                        instance.close();
                        let deleteParam = {
                            cusId: this.userInfo.cusId,
                            sports: [{
                                id: name,
                                duration: 0, //克重
                            }],
                        }
                        apiRequest(this, 'hmsportrecord', deleteParam, resData => {
                            // 删除成功，重新加载页面数据
                            this.getSportData()
                        }, 'post')
                    });
                    break;
            }
        },
        // 点击记录运动
        goRecord() {
            this.$router.push({
                path: '/recsport'
            });
        },
        // 重置字段
        clearVals() {
            this.rate = {
                number: 0,
                text: ''
            };
            this.calTotal = 0;
            this.calSportCommand = sessionStorage.getItem('calSportCommand');
            this.dataList = [];
        },
        // 获取已记录运动
        getSportData() {
            this.clearVals()
            let param = {
                cusId: this.userInfo.cusId,
            }
            apiRequest(this, 'hmsportrecord/page', param, resData => {
                resData.list.forEach(element => {
                    element.sports.forEach(obj => {
                        this.dataList.push({
                            id: obj.id,
                            name: obj.sportName,
                            imgUrl: obj.sportIconUrl,
                            cal: obj.sportTrophy,
                            unit: obj.duration,
                            unitText: '分钟',
                        })
                        this.calTotal += parseInt(obj.sportTrophy)
                    });
                });
                this.rate.number = this.calTotal / this.calSportCommand * 100;
                this.rate.text = this.calSportCommand - this.calTotal > 0 ? (this.calSportCommand - this.calTotal) + '' : '0'
            }, 'get')
        },

    }
}
</script>

<style lang="less">
@import '../../assets/css/common.less';

.container_food_recoreded {
    background-color: #fff;
    padding-bottom: 7.5rem;

    .circle_box {
        margin: 1.25rem;
        text-align: center;

        .van-circle__text {
            font-weight: bold;
            font-size: 1.5rem;
        }
    }

    .list {
        .title {
            font-size: 0.8125rem;
            color: #666;
            display: flex;
            justify-content: space-between;
            padding: 0.625rem 1.125rem;
        }

        .food_item {
            background-color: #fff;
            padding: 0.875rem;
            margin: 0.625rem 1rem;
            border-radius: 0.5rem;
            box-shadow: 0.0625rem -0.0625rem 0.25rem 0.0625rem rgba(252, 177, 132, 0.3);
            display: flex;
            justify-content: space-between;

            img {
                width: 2.5rem;
                height: 2.5rem;
            }

            .food_des {
                flex-grow: 2;
                text-align: left;

                div {
                    padding: 0.125rem 1.25rem;
                }
            }

            .van-icon-arrow-left {
                line-height: 2.5rem;
            }

        }

        .van-button--danger {
            height: 4.25rem;
        }
    }

    .btn {
        position: fixed;
        bottom: 3.125rem;
        left: 1rem;
        right: 1rem;
        border-radius: 2.5rem;
        display: flex;
        justify-content: space-around;

        button {
            flex-grow: 1;
        }
    }

}
</style>
